<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="pengxuan.js" type="text/javascript"></script>
<style>
  .out{
    width:500px;height:500px;border:1px solid red;
  }
  .one{
    width:500px;height:100px;background: pink;
  }
  .two{
     width:500px;height:200px;border:3px solid black;
  }
  .three{
    width:500px;height:100px;border:1px solid green;
  }
  .two-one{
    padding:0;margin:0;list-style:none;width:400px;height:150px;

  }
  .two-one li{
    border:1px solid #ccc;
  }
</style>
<script>

window.onload=function(){
var btn=document.getElementsByName("btn")[0];
var del=document.getElementsByName("del")[0];
var rep=document.getElementsByName("rep")[0];
var copy=document.getElementsByName("copy")[0];
var one=document.getElementById("one");
btn.onclick=function(){
	var div=document.createElement('div');
	div.style.width='200px';
	div.style.height='200px';
	div.style.border='1px solid red';
	div.innerHTML='pengxuan';
	//追加到父元素最后节点
	//document.body.appendChild(div);
	//追加到某个元素的前面
	//document.body.insertBefore(div,btn);
	
	//如何追加到某个元素的后面？？
	
	insertAfter(document.body,btn,div)	
};
del.onclick=function(){
	document.body.removeChild(one);	
};

rep.onclick=function(){
	var div=document.createElement('div');
	div.style.cssText="width:200px;height:200px;border:1px solid red";
	div.innerHTML='pengxuan';
	document.body.replaceChild(div,one);	
};
copy.onclick=function(){
	var ones=one.cloneNode(true);
	document.body.appendChild(ones);	
};

};






</script>
</head>

<body>
<input name="del" type="button" value="删除" />
<input name="rep" type="button" value="替换" />
<input name="copy" type="button" value="复制" />
<input name="btn" type="button" value="创建节点" />
<div style="width:100px;color:#fff; height:100px; background:green;" id="one">
fsfse
</div>
</div>
</body>
</html>
